<template>
	<div class="container">
		<el-card class="box-card">
			<el-form ref="queryForm" :inline="true" :model="queryData">
				<el-row>
					<el-col :span="24" class="flex-warp-container">
						<el-form-item
							:label="`${$t('common.belong_merchant')}:`"
							class="flex-row-container"
							label-width="77px"
						>
							<merchant-select
								v-model="queryData.merchantId"
							></merchant-select>
						</el-form-item>
						<el-form-item
							:label="`会员账号:`"
							class="flex-row-container"
							label-width="77px"
						>
							<el-input
								v-model="queryData.memeberName"
								clearable
								size="medium"
								:placeholder="$t('common.please_enter')"
								:disabled="loading"
								maxlength="11"
							></el-input>
						</el-form-item>
						<el-form-item style="margin-left: 10px">
							<el-button
								type="primary"
								icon="el-icon-search"
								:disabled="loading"
								size="medium"
								@click="search"
							>
								{{ $t('common.search') }}
							</el-button>
							<el-button
								icon="el-icon-refresh-left"
								:disabled="loading"
								size="medium"
								@click="reset"
							>
								{{ $t('common.reset') }}
							</el-button>
						</el-form-item>
					</el-col>
				</el-row>
			</el-form>
		</el-card>

		<el-card class="box-card top20" v-if="showDetail">
			<chargeDialog ref="chargeDialog" :params="queryData" />
		</el-card>
	</div>
</template>

<script>
import list from '@/mixins/list'
import { routerNames } from '@/utils/consts'
import chargeDialog from './components/chargeDialog'

export default {
  name: routerNames.memberCreditStatementDetails,
  components: {
    chargeDialog
  },
  mixins: [list],
  data() {
    return {
      queryData: {
        merchantId: '',
        memeberName: ''
      },
      curData: '',
      showDetail: false,
      billData: {}
    }
  },
  computed: {},
  watch: {},
  mounted() { },
  methods: {
    handleSuccess() {
      this.search()
    },
    search() {
      if (!this.queryData.merchantId) {
        this.$message.info('请选择所属商户')
        this.showDetail = false
      } else if (!this.queryData.memeberName) {
        this.$message.info('请输入会员账号')
        this.showDetail = false
      } else {
        this.showDetail = true
      }
    },
    getMemberDetail() {
      this.$refs['chargeDialog']?.queryData({
        ...this.queryData
      })
    },
    reset() {
      this.queryData = {
        merchantId: '',
        memeberName: ''
      }
      this.showDetail = false
    }
  }
}
</script>

<style lang="scss" scoped>
.container {
	padding: 20px;
	.top20 {
		margin-top: 20px;
	}
}
</style>
